<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* div {
            width: 500px;
            height: 300px;
            background-color: aqua;
        } */

        /* #first_header5 {
            width: 500px;
            height: 300px;
            background-color: aqua;
        }
        #second {
            width: 300px;
            height: 200px;
            background-color: red;
        } */

        .one {
            width: 400px;
            height: 200px;
            background-color: aqua;
        }
        .two {
            width: 300px;
            height: 150px;
            background-color: lightcoral;
        }
        .big {
            font-size: 50px;
        }
    </style>
</head>
<body>
    <!-- <div id="first_header5">hello</div>
    <div id="second">world</div> -->

    <div class="one">111</div>
    <div class="two">222</div>
    <div class="one big">333</div>
</body>
</html>

<!-- 
    选择器
        1. 标签选择器(元素选择器)
            用标签的名字作为选择器

            缺点: 会让页面里面的所有的相同元素都加上这个样式
            应用场景: 统一页面里面的某种元素的样式的时候

        2. id选择器
            语法:
                <div id="id名">xxxx</div>
                #id名 {
                    ...
                }

            同一个页面里面的id是不能重复的
            取名: 顾名思义
            字母，数字，下划线和连字符
            数字不要开头

        3. class选择器(类名选择器)
            语法:
                <div class="class名">xxxx</div>
                .class名 {
                    ...
                }

            可以一对多，也可以多对一
            一个标签的class可以用空格隔开以后添加多个
            灵活
 -->